/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import 'package:flutter/material.dart';
import 'package:hadss_adaptive_layout/hadss_adaptive_layout.dart';

import '../../../l10n/generated/app_localizations.dart';

class Head extends StatefulWidget {
  final WidthBreakpoint screenType;
  final num currentWidth;

  final num currentHeight;

  const Head({
    Key? key,
    required this.screenType,
    required this.currentWidth,
    required this.currentHeight,
  }) : super(key: key);

  @override
  State<Head> createState() => _HeadState();
}

class _HeadState extends State<Head> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return getScreenTypeWidget(
        widget.screenType, widget.currentWidth, widget.currentHeight);
  }

  Widget getScreenTypeWidget(screenType, currentWidth, currentHeight) {
    AppLocalizations il8n = AppLocalizations.of(context)!;
    if (screenType == WidthBreakpoint.sm || screenType == WidthBreakpoint.xs) {
      return Container(
        padding: const EdgeInsets.only(top: 40),
        height: 300,
        width: currentWidth,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('lib/assets/images/music/bg_img.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(6),
              margin: const EdgeInsets.only(left: 10, right: 10),
              decoration: BoxDecoration(
                  color: const Color(0xFF6E88A3),
                  borderRadius: BorderRadius.circular(20)),
              child: Image.asset(
                  'lib/assets/images/music/Public_ic_public_arrow_right.png'),
            ),
            Container(
              margin: const EdgeInsets.only(right: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                      width: 112,
                      height: 112,
                      margin: const EdgeInsets.only(left: 10, top: 10),
                      child: Transform.scale(
                        scale: 1.3,
                        child: Image.asset(
                            'lib/assets/images/music/music_home_page.png'),
                      )),
                  Expanded(
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        il8n.happyMelody,
                        style: const TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.w700,
                            color: Color.fromRGBO(255, 255, 255, 0.86)),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 5, bottom: 5),
                        child: Text(
                          il8n.nostalgiaMakes,
                          style: const TextStyle(
                              fontSize: 12,
                              color: Color.fromRGBO(255, 255, 255, 0.6)),
                        ),
                      ),
                      const Text(
                        'Christopher',
                        style: TextStyle(
                            fontSize: 14,
                            color: Color.fromRGBO(255, 255, 255, 0.6)),
                      )
                    ],
                  ))
                ],
              ),
            ),
            Container(
                margin: const EdgeInsets.only(left: 10, right: 10, top: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.asset('lib/assets/images/music/tab_icon_4.png'),
                    Image.asset('lib/assets/images/music/tab_icon_2.png'),
                    Image.asset('lib/assets/images/music/tab_icon_3.png'),
                    Image.asset('lib/assets/images/music/tab_icon_1.png'),
                  ],
                ))
          ],
        ),
      );
    } else if (screenType == WidthBreakpoint.md) {
      return Container(
        padding: const EdgeInsets.only(top: 40),
        height: 350,
        width: currentWidth,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('lib/assets/images/music/bg_img_md.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(6),
              margin: const EdgeInsets.only(left: 10, right: 10),
              decoration: BoxDecoration(
                  color: const Color(0xFF6E88A3),
                  borderRadius: BorderRadius.circular(20)),
              child: Image.asset(
                  'lib/assets/images/music/Public_ic_public_arrow_right.png'),
            ),
            Container(
              margin: const EdgeInsets.only(right: 130, left: 130),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                      width: 112,
                      height: 112,
                      margin: const EdgeInsets.only(left: 0, top: 10),
                      child: Transform.scale(
                        scale: 1.7,
                        child: Image.asset(
                            'lib/assets/images/music/music_home_page.png'),
                      )),
                  const SizedBox(
                    width: 20,
                  ),
                  Expanded(
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        il8n.happyMelody,
                        style: const TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.w700,
                            color: Color.fromRGBO(255, 255, 255, 0.86)),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 5, bottom: 5),
                        child: Text(
                          il8n.nostalgiaMakes,
                          style: const TextStyle(
                              fontSize: 11,
                              color: Color.fromRGBO(255, 255, 255, 0.6)),
                        ),
                      ),
                      const Text(
                        'Christopher',
                        style: TextStyle(
                            fontSize: 14,
                            color: Color.fromRGBO(255, 255, 255, 0.6)),
                      )
                    ],
                  ))
                ],
              ),
            ),
            Container(
                margin: const EdgeInsets.only(left: 120, right: 120, top: 30),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.asset('lib/assets/images/music/tab_icon_4.png'),
                    Image.asset('lib/assets/images/music/tab_icon_2.png'),
                    Image.asset('lib/assets/images/music/tab_icon_3.png'),
                    Image.asset('lib/assets/images/music/tab_icon_1.png'),
                  ],
                ))
          ],
        ),
      );
    } else if (screenType == WidthBreakpoint.xl ||
        screenType == WidthBreakpoint.lg) {
      return Container(
        margin: const EdgeInsets.fromLTRB(5, 0, 20, 0),
        child: Container(
          padding: const EdgeInsets.only(top: 40),
          width: 450,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
            Align(
            alignment: Alignment.centerLeft,
            child:
              Container(
                padding: const EdgeInsets.all(6),
                margin: const EdgeInsets.only(left: 10, right: 10),
                decoration: BoxDecoration(
                    color: const Color(0xFFE5E7E9),
                    borderRadius: BorderRadius.circular(20)),
                child: Image.asset(
                    'lib/assets/images/chevron_backward.png'),
              )),
              Container(
                height:600,
                width: 380,
                padding: const EdgeInsets.all(24),
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image:
                        AssetImage('lib/assets/images/music/bg_music_lg.png'),
                    fit: BoxFit.fill,
                  ),
                ),
                child: Column(
                  children: [
                    SizedBox(
                        width: 360,
                        height: 360,
                        child:  Transform.scale(
                          scale: 1.3,
                            child:Image.asset(
                              'lib/assets/images/music/music_home_page.png',fit: BoxFit.fitWidth,)),
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          il8n.happyMelody,
                          style: const TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.w700,
                              color: Color.fromRGBO(255, 255, 255, 0.86),
                          ),
                            textAlign:TextAlign.center
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 5, bottom: 5),
                          child: Text(
                            il8n.nostalgiaMakes,
                            style: const TextStyle(
                                fontSize: 11,
                                color: Color.fromRGBO(255, 255, 255, 0.6)),
                          ),
                        ),
                        const Text(
                          'Christopher',
                          style: TextStyle(
                              fontSize: 14,
                              color: Color.fromRGBO(255, 255, 255, 0.6)),
                        )
                      ],
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: 30),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Image.asset(
                                'lib/assets/images/music/tab_icon_4.png'),
                            Image.asset(
                                'lib/assets/images/music/tab_icon_2.png'),
                            Image.asset(
                                'lib/assets/images/music/tab_icon_3.png'),
                            Image.asset(
                                'lib/assets/images/music/tab_icon_1.png'),
                          ],
                        ))
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }
    return const SizedBox();
  }
}
